<template>
    <div>
        <el-dialog title="测点别名关联" :visible.sync="dialogVisible" width="800px" v-dialogDrag>
            <div>
                <div>
                    已配置项:
                    <el-select class="toleadSel" @change="handleChangeSelStyle" v-model="selectTreeType" placeholder="请选择" size="small" style="margin-bottom: 20px;">
                      <el-option
                      v-for="(item,index) in treeTypeList"
                      :key="index"
                      :label="item"
                      :value="item">
                      </el-option>
                  </el-select>
                </div>
                <el-table
                :data="tableData"
                row-key="id" 
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                border
                height="500px">
                <el-table-column prop="treeName"  label="所属部位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.node.treeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="别名">
                    <template slot-scope="scope">
                        <el-input class="toleadInput" v-model="scope.row.node.pointNameAlias" placeholder="请输入" @blur="handleSetName(scope.row.node)" @keyup.enter.native="handleSetName(scope.row.node)"  v-if="scope.row.node.isBottom" size="mini"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {GetTreeStyle,GetTree,setPointNameAsync} from "@/api/https";
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        stationId:{
            type:[String,Number],
            default:''
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
            if(newVal){
                this.onGetTreeStyle()
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal);
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            selectTreeType:'',
            treeTypeList:[],
            tableData:[]
        };
    },
    computed: {
        
    },
    methods: {
        onGetTreeStyle(){
            GetTreeStyle(this.stationId).then(res=>{
              if(res.isSuccess){
                  this.treeTypeList = res.data ||[]
                  this.selectTreeType = res.data[0]
                  this.handleGetTree()
              }
            });
        },
        handleGetTree(){
            GetTree(this.stationId,this.selectTreeType,'').then(res=>{
                if(res.isSuccess){
                    this.tableData = res.data || [];
                }
            });
        },
        handleChangeSelStyle(){
            this.handleGetTree()
        },
        handleSetName(rowData) {
            setPointNameAsync({
                id:rowData.id,
                code_ID:rowData.codE_ID,
                pointname:rowData.pointNameAlias,
                state:1,
                statioN_ID:rowData.statioN_ID
            }).then(res=>{
                if(res.isSuccess){
                    this.$message.success('操作成功！');
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
    }
}
</script>